<template>
  <div class="main">
    <div class="container">
    <!-- 轮播图页面 -->
    <div class="swiper">
      <div class="block text-center" m="t-4">
    <div class="demonstration"></div>
    <el-carousel trigger="click" height="550px">
      <el-carousel-item  v-for="(item,index) in ImageList" :key="index">
        <img :src="item.appAdvertiseUrl" width="1200" height="500">
      </el-carousel-item>
    </el-carousel>
  </div>

    </div>
    <!-- 中间导航 -->
    <div class="navigate container fix">
      <!-- <ul class="title">
        <li><RouterLink to="/home/recommend">推荐</RouterLink></li>
        <li><RouterLink to="/home/production">作品</RouterLink></li>
        <li><RouterLink to="/home/teach">教程</RouterLink></li>
        <li><RouterLink to="/home/specialtopic">专题</RouterLink></li>
        <li><RouterLink to="/home/information">动态</RouterLink></li>
        <li><RouterLink to="/home/attention">关注</RouterLink></li>
       <li><a href="javascript:;">感兴趣技能</a></li>
      </ul> -->
      <div class="mmenu">
      <el-menu 
    :default-active="activeIndex"
    active-color="#111111"
    class="el-menu-demo "
    mode="horizontal"
    :ellipsis="false"
  >
  <el-menu-item index="1"><RouterLink to="/home/recommend">推荐</RouterLink></el-menu-item>
    <div class="flex-grow"/>
    <el-menu-item index="2"><RouterLink to="/home/production">作品</RouterLink></el-menu-item>
    <el-menu-item index="3"><RouterLink to="/home/teach">教程</RouterLink></el-menu-item>
    <el-menu-item index="4"><RouterLink to="/home/specialtopic">专题</RouterLink></el-menu-item>
    <el-menu-item index="5"><RouterLink to="/home/information">动态</RouterLink></el-menu-item>
    <el-menu-item index="6"><RouterLink to="/home/attention">关注</RouterLink></el-menu-item>
  </el-menu>
     </div>
     <div class="interest"><a href="javascript:;" @click="openDialog">感兴趣技能</a></div>
    </div>
  </div>
  <!-- 弹窗界面 -->
  <el-dialog 
    v-model="dialogVisible"
    title="选择我喜欢的技能"
    width="60%"
>
  <div style="margin-top: -40px;margin-bottom: 30px;color: #b1b5c1">例如舞蹈就选舞种</div>
  <div>
    <el-form inline>
      <el-form-item label-width="600px" style="background-color: #f5f7f9">
        <el-input :prefix-icon="Search"
                  @input="inputHandler"
                  v-model="remform"
                  placeholder="搜索兴趣技能"
                  style="background-color: #f5f7f9;width: 300px;"></el-input>
      </el-form-item>

      <el-form-item style="margin-left: -20px">
        <el-button :disabled="isAble" @click="getSearch">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-tag style="margin-left:5px; margin-bottom:10px"
    v-for="(tag,index) in selectedTagArray"
    @close="handleClose(tag)"
    key="index"
    class="mx-1"
    closable
    
  >
    {{ tag }}
  </el-tag>
  </div>
  <div>

    推荐兴趣技能
  </div>
  <div style="display: flex;flex-wrap:wrap;width: 100%;">
    <div v-for="item in tagsArray" style="margin: 10px" key="item.id" @click="tagClickHandler(item)">
      <img class="posi" src="./images/4.jpg" style="width: 40px;border-radius: 50%">
      <el-button style="width: 100px;margin-left: -40px; ">
        {{item.name}}
      </el-button>
    </div>
  </div>

  <template #footer>
  <span class="dialog-footer">
    <el-button size="large" style="width: 120px" @click="cancelSelect">取消</el-button>
    <el-button size="large" style="width: 120px;background-color: #fa5e9d" type="primary"
               @click="sureSelect"
    >确认</el-button
    >
  </span>
  </template>
</el-dialog>

  <!-- 路由界面 -->
  <div class="wrapperBox">
      <RouterView></RouterView>
  </div>
  </div>
</template>

<script setup lang='ts'>
  import { onMounted, ref} from 'vue';
  import { Search } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  import axios from 'axios'
  import "./css/index.less"
  const loading=ref(true)
  const activeIndex = ref('1')
  //轮播图
  const ImageList=ref([])
  const getAdd=()=>{
    axios({
      url:'https://www.dance365.com/apis/promotion/ads/search/findByPosition?access_token=c494ae44-3adc-48ca-8749-5128a53358d7&position=pc_mainpage',
      method:'GET'
    }).then(res=>{
      ImageList.value=res.data
    })
  }
  //弹窗
  const isAble=ref(true)
  const dialogVisible=ref(false);
  const tagsArray=ref([])
  const remform=ref('')
  
  
  //打开弹框
  const openDialog=()=>{
    dialogVisible.value=true
    loading.value=true;
    getContent()
    loading.value=false
  }
  //搜索
  const getSearch=()=>{
    axios({
      url:`https://www.dance365.com/apis/avocation/avocations/search/findByName?access_token=c494ae44-3adc-48ca-8749-5128a53358d7&name=${remform.value}`,
      method:"GET"
    }).then(res=>{
      tagsArray.value=res.data
      selectedTagArray.value=[];
    });
    
  }
  //获取标签数据
  const getContent=()=>{
    axios({
      url:"https://www.dance365.com/apis/avocation/avocations/rec/user?access_token=c494ae44-3adc-48ca-8749-5128a53358d7&pageNum=4&pageSize=40",
      method:"GET"
    }).then((res)=>{
      tagsArray.value=res.data.content;
      
    })
  }
  //输入事件
  const inputHandler=()=>{
    isAble.value=true;
    if(remform.value.trim()){
      isAble.value=false
      getSearch()
      return;
    }
    getContent();
  }
  const selectedTagArray=ref([])
  //tagClick事件
  const tagClickHandler=(item:any)=>{
    console.log(item.name);
    
    if(selectedTagArray.value.length<7){
      selectedTagArray.value.push(item.name)
    }
    else{
      ElMessage('只能选择7个')
    }
  }
  const handleClose=(tag)=>{
    let index=selectedTagArray.value.findIndex((item)=>{
     return item===tag;
    })
    selectedTagArray.value.splice(index,1);
  }
  //取消事件
  const cancelSelect=()=>{
    dialogVisible.value = false;
    selectedTagArray.value=[];
    remform.value="";

  }
  const sureSelect=()=>{
    dialogVisible.value = false;
    selectedTagArray.value=[]
    remform.value=""
  }
  onMounted(()=>{
    getAdd();
    
  })
</script>

<style lang="less" scoped>
  .flex-grow {
  flex-grow: 1;
}
.interest{
  margin-left: 130px;
  display: flex;
  align-items: center;
  justify-content: right;
}
// .posi {
//   position: relative;
//   bottom: 11px;
//   left: 75px;
//   z-index: 999;
// }


</style>


